import { thin } from "../thin3.mjs";
import { popclose } from "./thin_pop.mjs";

export function thin_poplayer(options) {
  let poplayer;
  let popmask;
  function render() {
    popmask = document.createElement("popmask");
    if (options?.data) popmask.thin_data = options.data;
    document.body.appendChild(popmask);

    if (options?.onclose) popmask.onclose = options.onclose;
    popmask.onclick = (e) => {
      if (e.target === popmask) {
        popclose(popmask);
      }
    };

    poplayer = document.createElement("poplayer"); //弹出框-内容
    popmask.appendChild(poplayer);
    poplayer.style.width = `${options?.width || 800}px`;

    if (options?.template) thin.render(poplayer, options.template);

    return this;
  }
  return render.call({
    render: (template, data) => {
      thin(poplayer).render(template, data);
      return this;
    },
    onclose: (fn) => {
      popmask.onclose = fn;
      return this;
    },
  });
}
